<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>细胞进化 - 第一阶段：白板细胞</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <canvas id="game-canvas"></canvas>

        <div class="ui-panel">
            <div class="status-bar">
                <span class="status-label">能量:</span>
                <div class="energy-bar">
                    <div class="energy-fill" id="energy-fill"></div>
                </div>
            </div>
            <div class="status-bar">
                <span class="status-label">体积:</span>
                <div class="volume-bar">
                    <div class="volume-fill" id="volume-fill"></div>
                </div>
            </div>
            <div class="stats" id="stats">
                RNA: 0 | 氨基酸: 0 | 能量: 0
            </div>
        </div>

        <div class="particle-info" id="particle-info">
            <div class="particle-type rna">🔵 RNA片段: 遗传信息载体</div>
            <div class="particle-type amino">🟢 氨基酸: 蛋白质合成原料</div>
            <div class="particle-type energy">🟡 能量物质: 维持细胞活动</div>
            <div class="particle-type lipid">⚪ 脂质分子: 细胞膜组成</div>
            <div class="particle-type enzyme">🔴 酶分子: 催化各种反应</div>
            <div class="particle-type intermediate">🟣 中间产物: 反应中间体</div>
        </div>

        <div class="reaction-list" id="reaction-list">
            <h4>可用的生化反应：</h4>
            <div class="reaction-item">
                <div class="reaction-name">蛋白质合成</div>
                <div class="reaction-formula">🔵 + 🔴 + 🟢 → 🟣</div>
                <div class="reaction-desc">RNA + 酶 + 氨基酸 → 蛋白质</div>
            </div>
            <div class="reaction-item">
                <div class="reaction-name">能量转换</div>
                <div class="reaction-formula">🟡 + 🔴 → 🟡</div>
                <div class="reaction-desc">能量物质 + 酶 → ATP</div>
            </div>
            <div class="reaction-item">
                <div class="reaction-name">RNA复制</div>
                <div class="reaction-formula">🔵 + 🔴 → 🔵</div>
                <div class="reaction-desc">RNA模板 + 酶 → 新RNA</div>
            </div>
            <div class="reaction-tip">💡 将合适物质拖拽到一起即可触发反应</div>
        </div>

        <div class="reaction-hint" id="reaction-hint">
            <div id="reaction-text">将合适物质放在一起...</div>
        </div>

        <div class="reaction-progress" id="reaction-progress">
            <div id="progress-text">反应进行中...</div>
            <div id="progress-bar" style="width: 200px; height: 10px; background: rgba(255,255,255,0.2); border-radius: 5px; margin-top: 10px;">
                <div id="progress-fill" style="height: 100%; width: 0%; background: #28a745; border-radius: 5px; transition: width 0.1s;"></div>
            </div>
        </div>

        <div class="cell-boundary" id="cell-boundary"></div>

        <div class="instructions">
            <h3>玩法说明：</h3>
            <p>• 拖拽物质颗粒移动位置（包括细胞内外）</p>
            <p>• 跨越细胞膜时物质会自动转移</p>
            <p>• 🔴 酶分子会对附近物质产生吸引力</p>
            <p>• 将合适物质放在一起触发生化反应</p>
            <p>• RNA + 酶 + 氨基酸 = 蛋白质</p>
            <p>• 细胞中央的橙色结构用于固定酶</p>
            <p>• 管理细胞内部空间和物质平衡</p>
        </div>

        <div class="game-title">
            <h1>细胞进化 第一阶段</h1>
            <p>白板细胞的起源之旅</p>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>
